<template>
	<NavBar :obj="{ title: '反馈记录', color: '#000', backgroundColor: '#fff' }" />

	<view class="fill" style="padding-bottom: 120rpx;">
		<view class="item" v-for="(item, index) in list">
			<view class="left flex flex-col justify-between flex-1" style="padding-bottom: 20rpx">
				<view class="title line-1-clamp">{{ item.content }}</view>
				<view class="images flex items-center">
					<image :src="imgUrl + item2" v-for="(item2, index) in item.images" lazy-load="true" mode="aspectFill" @click="showPreviewImage([imgUrl + item2])"></image>
				</view>
				<view class="malide flex items-center justify-between">
					<view class="divs flex items-center">
						<text style="font-size: 22rpx; color: #aaaaaa">{{ item.create_time }}</text>
					</view>
					<view class="divs flex items-center">
						<text v-if="!item.reply_time" style="color: #f81a2e; font-size: 28rpx">{{ item.status }}</text>
						<text v-else style="color: #aaaaaa; font-size: 28rpx">{{ item.status }}</text>
					</view>
				</view>
			</view>

			<view class="left" style="padding: 20rpx 0 0 0; border-top: 1rpx #eee solid" v-if="item.reply_time">
				<view class="malide">
					<view class="divs flex items-center">
						<text style="font-size: 28rpx; color: #888888">{{ item.rcomment }}</text>
					</view>
					<view class="divs flex items-center">
						<text style="font-size: 22rpx; color: #aaaaaa">{{ item.reply_time }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, imgUrl, goUrl, hint, showPreviewImage } from '../../service/port';
	import { onShow, onReachBottom } from '@dcloudio/uni-app';

	const list = ref([]);
	const page = ref(1);

	async function getMessage() {
		let res = await port('getMessage', { page: page.value });
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}

	onShow(() => {
		page.value = 1;
		list.value.length = 0;
		getMessage();
	});

	onReachBottom(() => {
		getMessage();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.img-top {
		width: 100%;
		height: 350rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.fill {
		position: relative;

		.item {
			background: #ffffff;
			border-radius: 18rpx;
			padding: 29rpx 25rpx;
			margin: 24rpx 30rpx;
			.left {
				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.images {
					padding: 20rpx 0;
					gap: 15rpx;
					> image {
						width: 144rpx;
						height: 144rpx;
						border-radius: 18rpx;
					}
				}

				.malide {
					margin-top: 15rpx;
				}
				.desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin: 30rpx 0;
				}
				.divs {
					> text {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-left: 5rpx;
					}

					&:first-child {
						margin-right: 36rpx;
					}
				}
			}
			.icon {
				width: 248rpx;
				height: 168rpx;
				border-radius: 18rpx;
			}
		}
	}
</style>
